<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <!--如果是IE 就以标准渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <!-- 视窗——————响应式布局 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

    <!--当前页面的三要素-->
    <title>运维系统</title>
    <meta name="description" content="聚能优电" />
    <meta http-equiv="keywords" content="聚能优电" />
    <script type="text/javascript" src="../js/verify.js"></script>
    <script type="text/javascript" src="../js/common/commonfuntion.js"></script>
    <!-- css -->
    <!-- <link rel="stylesheet" type="text/css" href="../css/common/common.css" /> -->
    <link rel="stylesheet" type="text/css" href="../css/alarm.css" />

    <style>
        html{
            overflow: auto;
            width: 100%;
            height: 100%;
        }
        body{
            overflow: auto;
            width: 100%;
            height: 100%;
            margin:0;
            padding:0;
        }
        #container .alarm_screen .m_content .gjdata .data_wrap .datalista{
            width: 100%;
            height: 1rem;
            line-height: 1rem;
            border-bottom: 1px dotted #1B3150;
            display: block;
        }
        #container .alarm_screen .m_content .gjdata .data_wrap .datalista span{
            font-size: 0.28rem;
            height: 1rem;
            color: #7F94B2;
            letter-spacing: 0;
        }
        #container .alarm_screen .m_content .gjdata .data_wrap .datalista span.dataleft{
            float: left;
            width:80%;
            display: inline-block;
        }
        #container .alarm_screen .m_content .gjdata .data_wrap .datalista span.dataleft .dataname{
            width:50%;
            display:inline-block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        #container .alarm_screen .m_content .gjdata .data_wrap .datalista span.dataleft .datanum{
            display:inline-block;
        }
        #container .alarm_screen .m_content .gjdata .data_wrap .datalista span.dataright {
            float: right;
            width:20%;
            height: 1rem;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        #container .alarm_screen .m_content .gjdata .data_wrap .datalista span.dataright span.dataicon{
            line-height: 0.4rem;
            text-align: center;
            position: relative;
            width: 0.6rem;
        }
        #container .alarm_screen .m_content .gjdata .data_wrap .datalista span.dataright span.dataicon img {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 0.4rem;
            height: 0.4rem;
            margin-top: -0.2rem;
            margin-left: -0.2rem;
        }


        /* 弹框样式 */
        .layouts {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, .4)
        }
        
        .layoutsMain {
            width: 300px;
            height: 200px;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            background: #fff;
            border-radius: 5px;
            font-size:12px !important;
        }
        
        .title {
            height: 39px;
            padding: 0 10px;
            border-bottom: 1px solid #dcdcdc;
            font-size: 14px;
            line-height: 39px;
            color: #333;
        }
        
        .main-wrapper {
            /* height: 220px; */
            height: 120px;
            overflow-y: auto;
        }
        
        .btn-wrapper {
            text-align: center;
            ;
            height: 39px;
            border-top: 1px solid #dcdcdc;
        }
        
        .btn-wrapper span {
            width: 60px;
            margin: 0 10px;
            height: 24px;
            border-radius: 5px;
            display: inline-block;
            line-height: 24px;
            margin-top: 7px;
        }
        
        .btn-wrapper span:first-child {
            color: #fff;
            background: #20ace8
        }
        
        .btn-wrapper span:last-child {
            color: #666;
            background: #f1f1f1
        }
        
        .checkboxwrapper {
            padding: 10px;
        }
        
        .checkboxwrapper label {
            width: auto;
            height: auto;
            font-size: 12px;
            min-width: 68px;
            display: inline-block;
            cursor: pointer;
            margin-bottom: 5px;
        }
        
        .checkboxwrapper input {
            /* appearance:none; */
            /* appearance:button; */
            margin-right: 5px;
        }

        /* 删除功能的样式 */
        .layui-layer.layui-layer-dialog .layui-layer-content{
            text-align: center;
        }
        .layui-layer.layui-layer-dialog .layui-layer-btn.layui-layer-btn-{
            height:50px;
            text-align: center;
        }
        .layui-layer.layui-layer-dialog .layui-layer-btn.layui-layer-btn- a{
            font-size:14px;
        }





    </style>
</head>

<body>
    <div id="container" class="alarm">
        <div class="alarm_01">
            <!--主屏内容-->
            <div class="alarm_screen">
                <div class="m_title">
                    <div id="back" class="back">
                        <img src="../images/back.svg" alt="">
                    </div>
                    <span class="tit" id="showname"></span>
                </div>
                <div class="m_content">
                    <div style="font-size:18px;height:30px;margin-bottom:10px;">
                        <img src="../images/addnum.svg" alt="" style="float:right;" id="addnum" />
                    </div>
                    <div class="gjdata">
                        <div class="data_wrap" id="listdata">
                            <!-- <a href="./order/orderdetail_gj.html" class="datalista">
                                <span class="dataleft">
                                    <span class="dataname">王欢欢</span>
                                    <span class="datatel">12345678909</span>
                                </span>
                                <span class="dataright">
                                    <span class="dataicon">
                                        <img src="../images/delete.svg" alt="" />
                                    </span>
                                </span>
                            </a>
                            <a href="order/orderdetail_fj.html" class="datalista">
                                <span class="dataleft">01022</span>
                                <span class="dataright">
                                    <span class="dataicon">
                                        <img src="../images/delete.svg" alt="" />
                                    </span>
                                </span>
                            </a>
                            <a href="" class="datalista">
                                <span class="dataleft">01023</span>
                                <span class="dataright">
                                    <span class="dataicon">
                                        <img src="../images/delete.svg" alt="" />
                                    </span>
                                </span>
                            </a> -->

                        </div>

                    </div>

                </div>

            </div>
        </div>
    </div>

    <div class="layouts" style="display:none">
        <div class="layoutsMain">
            <div class="title">添加项目成员</div>
            <div class="main-wrapper">
                <div class="checkboxwrapper">
                </div>
            </div>
            <div class="btn-wrapper">
                <span class="a-btn-01" id="subdata" style="font-size: 12px;">确定</span>
                <span class="a-btn-02" style="font-size: 12px;">取消</span>
            </div>
        </div>
    </div>


    <script>
        (function (win, doc) {
            var docEl = doc.documentElement || document.body; //获取HTML标签

            var container = doc.getElementById("container"); //container元素
            //判断是移动端设备还是PC,移动 就采用'orientationchange',横竖屏事件，PC端就采用onresize，窗口改变时间
            var resize =
                "onorientationchange" in win ? "orientationchange" : "resize";

            function rem() {
                docEl.style.fontSize = 100 * (container.clientWidth / 750) + "px";
            }

            //监听'DOMContent事件:DOM加载完成执行,如果DOMContent事件，那么执行rem函数
            doc.addEventListener("DOMContentLoaded", rem, false);

            //win下监听resize事件,如果resize事件，那么执行rem函数
            win.addEventListener(resize, rem, false);
        })(window, document);
    </script>
    <!-- js -->
    <!-- <script type="text/javascript" src="../js/jquery-3.4.1.js"></script> -->
    <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
    <!-- <script type="text/javascript" src="./js/swiper-3.4.2.min.js"></script> -->
    <script type="text/javascript" src="../layer/layer.js"></script>
    <script>
        $(document).ready(function () {
            var projectid = GetQueryString('projectid');
            var projectname = GetQueryString('projectname');
            var showname = projectname + '-项目成员列表'
            $("#showname").html(showname);


            var zhi = []; //选中弹框的值

            $("#back").click(function(){
                window.location.href = "../promanage.html";
            });

            
            // 增加功能
            $("#addnum").click(function () {
                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: "http://112.74.169.99:21021/api/services/app/ProjectService/GetUserByProjectID?projectid=" + projectid,
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("Accept",
                            "application/json, text/javascript, */*; q=0.01"
                        );
                        xhr.setRequestHeader("Authorization", accessToken);
                        xhr.setRequestHeader('.AspNetCore.Culture',
                            'zh-Hans');
                    },
                    success: function (res) {
                        $('.layouts').show();
                        var checkboxWrap = [], _data = res.result;
                        for (var j = 0; j < _data.length; j++) {
                            var flag = zhi.indexOf(_data[j].userName) > -1; //精华
                            checkboxWrap.push('<label><input style="width:12px;height:12px;border:1px solid rgba(1,103,255,0.3);background:transparent;color:#0167FF;" type="checkbox" ' + (flag ? "checked" : null) + ' name="' + _data[j].userName + '" value="' + _data[j].userID + '"/><span>' + _data[j].userName + '</span></label>')
                        }
                        $('.checkboxwrapper').html(checkboxWrap.join(""));
                    },
                    error: function (err) {
                        console.log("请求失败");
                    }
                });
            });



            //点击确定事件
            $("#subdata").click(function(){
                var subarr = [];
                var $checked = $('.checkboxwrapper input[type=checkbox]:checked');
                var chsLength = $checked.length;
                for (var i = 0; i < chsLength; i++) {
                    subarr.push($checked.eq(i).val());
                }
                var params = {UserID: subarr,ProjectID: projectid};
                params = JSON.stringify(params);
                $.ajax({
                    url: "http://112.74.169.99:21021/api/services/app/ProjectService/CreatProjectMember",
                    data: params,
                    type: "post",
                    dataType: "json",
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("Content-Type", "application/json");
                        xhr.setRequestHeader(
                            "Accept",
                            "application/json, text/plain, */*"
                        );
                    },
                    success: function (res) {
                        if( res.success){
                            window.location.reload();
                        }else{
                            layer.msg('添加失败', {
                                icon: 1,
                                time: 1000 //1秒关闭（如果不配置，默认是3秒）
                            });
                        }
                        $('.layouts').hide();
                    },
                    error: function (res) {
                        console.log(res);
                    },
                });
            });

            //点击取消事件
            $('body').on('click', '.a-btn-02', function() {
                $('.layouts').hide();
            })


            updateData(); // 首次加载立即请求数据
            // setInterval(updateData, 1000); // 首次加载之后，每1s重新请求一次数据
            function updateData() { // 请求数据
                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: "http://112.74.169.99:21021/api/services/app/ProjectService/GetProjectMemberListByProjectId?id=" + projectid,
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("Accept",
                            "application/json, text/javascript, */*; q=0.01"
                        );
                        xhr.setRequestHeader("Authorization", accessToken);
                        xhr.setRequestHeader('.AspNetCore.Culture',
                            'zh-Hans');
                    },
                    success: function (res) {
                        // console.log(res);
                        $("#listdata").html(` `);
                        $("#listdata").html(eachdata(res.result));

                        // 删除功能
                        $(".deletenum").click(function(){
                            var projectmemberid = this.getAttribute("dataid");
                            layer.confirm(' 确定要删除？', { btn: ['确定','取消'] //按钮
                                }, function(){
                                    // 确定删除后的接口调用
                                    $.ajax({
                                        type: "GET",
                                        dataType: "json",
                                        url: "http://112.74.169.99:21021/api/services/app/ProjectService/GetRemoveProjectMember?projectmemberid=" + projectmemberid,
                                        beforeSend: function (xhr) {
                                            xhr.setRequestHeader("Accept",
                                                "application/json, text/javascript, */*; q=0.01"
                                            );
                                            xhr.setRequestHeader("Authorization", accessToken);
                                            xhr.setRequestHeader('.AspNetCore.Culture',
                                                'zh-Hans');
                                        },
                                        success: function (res) {

                                            if( res.success){
                                                layer.msg('删除成功', {
                                                    icon: 1,
                                                    time: 1000 //1秒关闭（如果不配置，默认是3秒）
                                                }, function (){
                                                    window.location.reload();
                                                });
                                            }else{
                                                layer.msg('删除失败', {
                                                    icon: 1,
                                                    time: 1000 //1秒关闭（如果不配置，默认是3秒）
                                                });
                                            }

                                        },
                                        error: function (error){
                                            console.log(error);
                                        }
                                    });
                                }
                            );
                           

                        });
                    },
                    error: function (err) {
                        console.log("请求失败");
                    }
                });

            }

            // 遍历数据
            function eachdata(obj) {
                var str = '';
                if (obj.constructor == Array) {
                    for (var i = 0, len = obj.length; i < len; i++) {
                        var url = '';
                        str += `<div class="datalista">`;

                            str += `<span class="dataleft">`;
                                str += `<span class="dataname">` + obj[i].userName + `</span>`;
                                if(obj[i].phoneNumber === null){
                                    str += `<span class="datanum" style="color:transparent;">` + obj[i].phoneNumber + `</span>`;
                                }else{
                                    str += `<span class="datanum">` + obj[i].phoneNumber + `</span>`;
                                }
                                
                            str += `</span>`;

                            str += `<span class="dataright">`;
                                str += `<span class="dataicon deletenum" dataid="` +  obj[i].projectMemberID + `" >`;
                                str += `<img src="../images/delete.svg" alt="" />`;
                                str += `</span>`;
                            str += `</span>`;

                        str += `</div>`;
                    }
                    return str;
                }
            }

            
        });
    </script>

</body>

</html>